<template>
	<view class="container">
		<view class="title">
			添加银行卡
		</view>
		<view class="sub_title">
			请绑定持卡人本人的银行卡
		</view>
		<view class="form_list">
			<view class="list-item">
				<span>姓名</span>
				<input type="text" v-model="name" placeholder="请输入姓名"
					placeholder-style="font-size: 28upx;color: #ccc;" />
			</view>
			<view class="list-item">
				<span>手机号</span>
				<input type="number" v-model="phone" placeholder="请输入手机号"
					placeholder-style="font-size: 28upx;color: #ccc;" />
			</view>
			<view class="list-item">
				<span>开户行</span>
				<picker @change="bindPickerChange" :value="index" mode="selector" :range="array" range-key="bankName">
					<view class="uni-input">{{array[index].bankName}}</view>
				</picker>
				<!-- <input type="text" v-model="bank" placeholder="请输入开户行" placeholder-style="font-size: 28upx;color: #ccc;" /> -->
			</view>
			<view class="list-item">
				<span>银行卡号</span>
				<input type="number" v-model="account" placeholder="请输入银行卡号"
					placeholder-style="font-size: 28upx;color: #ccc;" />
			</view>
		</view>
		<view class="save_btn" @click="addCard">
			添加
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				account: '',
				phone: '',
				bank: '',
				array: [
					{bankCode: '', bankName: '选择开户行'},
					{bankCode: 'ALIPAY', bankName: '支付宝账户'},
					{bankCode: 'WECHAT', bankName: '微信账户'},
					{bankCode: 'ICBC', bankName: '工商银行'},
					{bankCode: 'ABC', bankName: '农业银行'},
					{bankCode: 'PSBC', bankName: '邮储银行'},
					{bankCode: 'CCB', bankName: '建设银行'},
					{bankCode: 'CMB', bankName: '招商银行'},
					{bankCode: 'BOC', bankName: '中国银行'},
					{bankCode: 'COMM', bankName: '交通银行'},
					{bankCode: 'SPDB', bankName: '浦发银行'},
					{bankCode: 'GDB', bankName: '广发银行'},
					{bankCode: 'CMBC', bankName: '民生银行'},
					{bankCode: 'PAB', bankName: '平安银行'},
					{bankCode: 'CEB', bankName: '光大银行'},
					{bankCode: 'CIB', bankName: '兴业银行'},
					{bankCode: 'CITIC', bankName: '中信银行'}
				],
				index: 0,
			}
		},
		onLoad() {

		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			addCard() {
				if(this.array[this.index].bankName == '选择开户行') {
					this.$wanlshop.msg('请选择开户行')
				}else if(this.name == '') {
					this.$wanlshop.msg('请输入姓名')
				}else if(this.phone == ''){
					this.$wanlshop.msg('请输入手机号')
				}else if(this.account == '') {
					this.$wanlshop.msg('请输入银行卡号')
				} else {
					uni.showLoading({
						title: '添加中...'
					})
					this.$request({
						url: 'pay/addPayAccount',
						method: 'POST',
						data: {
							username: this.name,
							mobile: this.phone,
							bankCode: this.array[this.index].bankCode,
							cardCode: this.account,
							bankName: this.array[this.index].bankName
						}
					}).then(res => {
						if(res.data.code == 1) {
							uni.showToast({
								title: '添加成功',
								icon: 'none',
								duration: 3000
							})
							uni.navigateBack({})
							uni.hideLoading()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 3000
							})
							uni.hideLoading()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30upx;

		.title {
			font-size: 48upx;
			font-weight: bold;
			margin-top: 80upx;
		}

		.sub_title {
			font-size: 30upx;
			color: #333;
			margin-top: 20upx;
		}

		.form_list {
			margin-top: 80upx;

			.list-item {
				display: flex;
				padding: 20upx 0;
				border-bottom: 2upx solid #F4F5F9;

				&:first-child {
					border-top: 2upx solid #F4F5F9;
				}

				span {
					display: inline-block;
					width: 160upx;
					flex-shrink: 0;
					font-size: 28upx;
					color: #333;
				}

				input {
					width: 100%;
				}
			}
		}

		.save_btn {
			position: absolute;
			width: 686upx;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			background: #EBBE87;
			border-radius: 50upx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			bottom: 80upx;
			left: 32upx;
		}
	}
</style>
